<template>
	<view>
		<navBar navbarTitle="能量雷达" showback bgColor="" backdrop="10px"></navBar>
		<view class="nav_bg"></view>
		<view class="main">
			<view class="radar_box">
				<view class="radar_title">全局雷达图</view>
				<!-- <view class="" id="echartsBox"></view> -->
				<canvas canvas-id="canvasRadar" class="charts"></canvas>
			</view>

			<view class="radar_box radar_box_small" v-for="(item,index) in list" :key="index">
				<view class="radar_title">{{item.name}}</view>
				<view class="content_box">
					<view class="content_left">
						<view class="content_left_info">
							<view class="content_item">
								<view class="numbers">800</view>
								<view class="num_desc">记忆力</view>
							</view>
							<view class="content_item">
								<view class="numbers">800</view>
								<view class="num_desc">注意力</view>
							</view>
						</view>
						<view class="content_left_info">
							<view class="content_item">
								<view class="numbers">800</view>
								<view class="num_desc">视觉认知</view>
							</view>
							<view class="content_item">
								<view class="numbers">800</view>
								<view class="num_desc">逻辑思维</view>
							</view>
						</view>
						<view class="content_left_info">
							<view class="content_item">
								<view class="numbers">800</view>
								<view class="num_desc">反应速度</view>
							</view>
							<view class="content_item">
								<view class="numbers">800</view>
								<view class="num_desc">知识储备</view>
							</view>
						</view>

					</view>
					<canvas :canvas-id="`canvasRadar${index}`" class="charts_small"></canvas>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import uCharts from "@/components/u-charts/u-charts.js";
	export default {
		data() {
			return {
				// 雷达图
				radar: {
					categories: ['记忆力\n100', '逻辑思维\n100', '知识储备\n3000', '反应速度\n5500', '注意力\n100', '视觉认知\n2100'],
					series: [{
						name: '熟悉度',
						data: [95, 88, 80, 60, 40, 95]
					}]
				},
				radarSm: {
					categories: ['', '', '', '', '', ''],
					series: [{
						name: '熟悉度',
						data: [95, 88, 80, 60, 40, 95]
					}]
				},

				list: [{
						name: '居家安全雷达图',
					},
					{
						name: '社会安全雷达图',
					},
					{
						name: '消防安全雷达图',
					},
					{
						name: '交通安全雷达图',
					},
					{
						name: '自然灾害雷达图',
					},
					{
						name: '生产安全雷达图',
					},
					{
						name: '应急救护雷达图',
					},
				],



				pixelRatio: 1,
			}
		},
		onLoad() {
			this.showRadar("canvasRadar", uni.upx2px(650), uni.upx2px(516), 1, this.radar);
			// this.list.forEach((e, index) => {
			// 	this.showRadar(`canvasRadar${index}`, uni.upx2px(400), uni.upx2px(280), 1.3, this.radarSm);
			// })
			this.drawAllRadarCharts()
		},
		methods: {
			async drawAllRadarCharts() {
				const promises = this.list.map((item, index) => {
					const radar = this.radarSm; // 假设 radarSm 是你的雷达图数据
					const canvasId = `canvasRadar${index}`;
					const cWidth = uni.upx2px(400);
					const cheight = uni.upx2px(280);
					const pixelRatio = 1.3;

					return this.showRadar(canvasId, cWidth, cheight, pixelRatio, radar);
				});

				try {
					const results = await Promise.all(promises);
					console.log('所有雷达图绘制完成', results);
				} catch (error) {
					console.error('某些雷达图绘制失败', error);
				}
			},
			// 雷达图
			showRadar(canvasId, cWidth, cheight, pixelRatio, radar) {
				let _self = this
				var canvaRadar = new uCharts({
					$this: _self,
					canvasId: canvasId,
					type: 'radar',
					fontSize: 11,
					padding: [5, 5, 5, 5],
					legend: {
						show: false
					},
					colors: ['#FBC22D'],
					background: '#FFFFFF',
					pixelRatio: pixelRatio,
					animation: true,
					dataLabel: true,
					categories: radar.categories,
					series: radar.series,
					width: cWidth * pixelRatio,
					height: cheight * pixelRatio,
					extra: {
						radar: {
							max: 100, //雷达数值的最大值
							opacity: 0.6,
							labelColor: '#333333'
						}
					}
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.nav_bg {
		width: 100%;
		height: 400rpx;
		position: fixed;
		top: 0;
		z-index: 0;
	}

	.nav_bg::after {
		width: 180%;
		height: 400rpx;
		position: absolute;
		left: -40%;
		top: 0;
		z-index: -1;
		content: '';
		border-radius: 0 0 50% 50%;
		background: #FBC22D;
	}

	.main {
		position: relative;
		z-index: 1;
	}

	.radar_box {
		box-shadow: 0rpx 4rpx 24rpx 0rpx rgba(112, 112, 112, 0.05);
		border-radius: 40rpx;
		width: 702rpx;
		height: 554rpx;
		box-sizing: border-box;
		padding: 30rpx 40rpx;
		background: #fff;
		margin: 0 auto;
		margin-top: 40rpx;

		.radar_title {
			font-size: 36rpx;
		}

		.charts {
			width: 100%;
			height: 100%;
			box-sizing: border-box;
		}
	}

	.radar_box_small {
		height: fit-content !important;
	}

	.charts_small {
		width: 440rpx !important;
		// height: 300rpx;
		box-sizing: border-box;
		position: relative;
		left: -30rpx;
	}


	.content_box {
		display: flex;
		margin-top: 30rpx;
		overflow: auto;

		.content_left {
			width: 40%;

		}

		.content_left_info {
			display: flex;
			margin-bottom: 24rpx;

			.content_item {
				width: 50%;
			}
		}

		.numbers {
			font-weight: 500;
			font-size: 36rpx;
		}

		.num_desc {
			font-size: 24rpx;
			color: #A3ACBF;
		}

		.view_btn {
			width: 204rpx;
			height: 60rpx;
			background: #FBC22D;
			font-weight: 600;
			font-size: 24rpx;
			border-radius: 28rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-left: 5rpx;

			text {
				line-height: 1;

			}
		}
	}
</style>